<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="860px"
      title="预警阀值"
      wrapClassName="monitoring-modal-container"
      @cancel="closeModal()"
    >
      <div class="curve-modal-body">
        <a-row>
          <a-form-model ref="form" :model="form" :rules="formRules">
            <a-col :span="12">
              <a-form-model-item label="监测点" prop="equCode">
                <a-select
                  v-model="form.equCode"
                  style="width: 100%"
                  placeholder="请选择监测点"
                  @change="getInfoList()"
                >
                  <a-select-option
                    :value="item.equNum"
                    v-for="(item, index) in mixinData"
                    :key="index"
                  >
                    {{ item.equName }}
                  </a-select-option></a-select
                >
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="PM2.5" prop="pm25">
                <a-input v-model="form.pm25" placeholder="请输入PM2.5" />
              </a-form-model-item>
              <span class="unit">μg/m³</span>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="PM10" prop="pm10">
                <a-input v-model="form.pm10" placeholder="请输入PM10" />
              </a-form-model-item>
              <span class="unit">μg/m³</span>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="PM100" prop="tsp">
                <a-input v-model="form.tsp" placeholder="请输入PM100" />
              </a-form-model-item>
              <span class="unit">μg/m³</span>
            </a-col>
            <a-col :span="12"
              ><a-form-model-item label="温度" prop="tmp">
                <a-input v-model="form.tmp" placeholder="请输入温度" />
              </a-form-model-item>
              <span class="unit" style="right: -20px">℃</span>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="湿度" prop="rh">
                <a-input v-model="form.rh" placeholder="请输入湿度" />
              </a-form-model-item>
              <span class="unit" style="right: -40px">%RH</span>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="噪音" prop="zs">
                <a-input v-model="form.zs" placeholder="请输入噪音" />
              </a-form-model-item>
              <span class="unit" style="right: -20px">dB</span>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="连续预警条数" prop="continueCount">
                <a-input
                  v-model="form.continueCount"
                  placeholder="请输入连续预警条数"
                />
              </a-form-model-item>
            </a-col>
          </a-form-model>
        </a-row>
      </div>
      <div class="curve-modal-footer">
        <a-button type="default" @click="closeModal()">取消</a-button>
        <a-button type="primary" @click="submit()" :loading="loading">
          确定
        </a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { notificationTip } from "@/utils";
//获取登录信息
import { getLoginData } from "@/tools";
import { getBlockList, getMixinList } from "@/api/common";
import {
  getQueryWarnCfgByEquCode,
  getSaveWarnCfg,
} from "@/api/wisdom-beam/green-app.js";
export default {
  name: "MonitoringModel",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.getSecList();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      form: {
        secCode: "",
        secName: "",
        equCode: undefined,
        equName: "",
        pm25: "",
        pm10: "",
        tsp: "",
        tmp: "",
        rh: "",
        zs: "",
        id: "",
        continueCount: "",
      },
      formRules: {
        equCode: [
          {
            required: true,
            message: "请选择监测点",
          },
        ],
        pm25: [
          {
            required: true,
            message: "请填写PM2.5",
          },
        ],
        pm10: [
          {
            required: true,
            message: "请填写PM10",
          },
        ],
        tsp: [
          {
            required: true,
            message: "请填写PM100",
          },
        ],
        tmp: [
          {
            required: true,
            message: "请填写温度",
          },
        ],
        rh: [
          {
            required: true,
            message: "请填写湿度",
          },
        ],
        zs: [
          {
            required: true,
            message: "请填写噪音",
          },
        ],
        continueCount: [
          {
            required: true,
            message: "请填写连续预警条数",
          },
          {
            pattern: /^[0-9]*$/,
            message: "请输入正整数",
          },
        ],
      },
      blockData: [],
      mixinData: [],
      block: "",
      mixin: "",
      loading: false,
    };
  },
  methods: {
    //查询标段
    getSecList() {
      let login = getLoginData();
      getBlockList({ tenantCode: login.tenantCode, userId: login.userId })
        .then((res) => {
          this.blockData = res?.data?.result || [];
          this.form.secCode = this.blockData?.[0]?.orgCode || "";
          this.form.secName = this.blockData?.[0]?.orgName || "";
          this.getMixinList();
        })
        .catch((_) => {
          this.blockData = [];
          this.form.secCode = "";
          this.form.secName = "";
        });
    },
    //查询观测点
    getMixinList() {
      let login = getLoginData();
      let { secCode } = this.form;
      getMixinList({
        tenantCode: login.tenantCode,
        userId: login.userId,
        systemCode: login.sysSource,
        orgCode: secCode,
        equTypeValue: "15",
      })
        .then((res) => {
          this.mixinData = res.data.result;
        })
        .catch();
    },

    // 查询详情
    getInfoList() {
      let { secCode = "", equCode = "" } = this.form;
      getQueryWarnCfgByEquCode({
        equCode,
        secCode,
      })
        .then((res) => {
          let { data } = res;
          this.form.id = data?.result?.id || "";
          this.form.pm25 = data?.result?.pm25 || "";
          this.form.pm10 = data?.result?.pm10 || "";
          this.form.tsp = data?.result?.tsp || "";
          this.form.tmp = data?.result?.tmp || "";
          this.form.rh = data?.result?.rh || "";
          this.form.zs = data?.result?.zs || "";
          this.form.continueCount = data?.result?.continueCount || "";
        })
        .catch();
    },
    //关闭弹框
    closeModal() {
      this.form = {
        secCode: "",
        secName: "",
        equCode: undefined,
        equName: "",
        pm25: "",
        pm10: "",
        tsp: "",
        tmp: "",
        rh: "",
        zs: "",
        id: "",
        continueCount: "",
      };
      this.$refs.form.resetFields();
      this.$emit("update:visible", false);
    },
    //确定
    submit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          let { equCode } = this.form;
          let equName = this.mixinData.find(
            (item) => item.equNum == equCode
          ).equName;
          let formJson = {
            secName: this.form.secName,
            secCode: this.form.secCode,
            equCode: this.form.equCode,
            equName: equName,
            pm25: this.form.pm25,
            pm10: this.form.pm10,
            tsp: this.form.tsp,
            tmp: this.form.tmp,
            rh: this.form.rh,
            zs: this.form.zs,
            continueCount: this.form.continueCount,
          };
          if (this.form.id) {
            formJson["id"] = this.form.id;
          }
          getSaveWarnCfg(formJson)
            .then((res) => {
              this.loading = false;
              notificationTip("success", "保存成功");
              this.closeModal();
            })
            .catch((err) => {
              this.loading = false;
            });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
//弹框
/deep/.monitoring-modal-container {
  .ant-modal-body {
    padding: 0;
  }
  .curve-modal-body {
    padding: 20px 80px 20px 20px;
    max-height: 620px;
    .custom-scrollbar();
  }
  .curve-modal-footer {
    text-align: center;
    padding-bottom: 20px;
    button {
      &:last-child {
        margin-left: 20px;
      }
    }
  }
}
//表单
/deep/.ant-form-item {
  display: flex;
  .ant-form-item-label {
    width: 150px;
    label {
      color: #999999;
    }
  }
  .check-item-select {
    height: 86px;
    .ant-select-selection__rendered {
      height: 86px;
      .ant-select-selection__placeholder {
        margin-top: -40px !important;
      }
    }
  }
  .ant-form-item-control-wrapper {
    flex: 1;
  }
}
.unit {
  position: absolute;
  top: 12px;
  right: -50px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
/deep/.ant-calendar-picker {
  width: 100%;
  min-width: unset !important;
}
</style>
